<template>
	<view class="page">
		<view class="box">
			<view class="tit">
				<image src="../../static/images/qian.png" class="qian"></image>
				<view class="">二维码收款</view>
			</view>
			<tki-qrcode
			   ref="qrcode"
			   cid="qrcode1"
			   size="350"
				:lv= "1"
			   :val="qrcode_url"
			   @result="qrR" />
			   <view class="money">付款金额<text class="shu">|</text>¥{{money}}</view>
			   <view class="msg">二维码是临时生成的，您可以截图保存！</view>
		</view>
		<view class="btn-box">
			<button class="btn" @click="goRecord">关闭</button>
		</view>
	</view>
</template>

<script>
	import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue";
	export default {
		data() {
			return {
				qrcode_url:'',
				id:0,
				money:''
			}
		},
		onLoad(e) {
			this.id = e.id;
			this.money = e.money;
			this.qrcode_url = this.$request.h5_share_url+"?page=person_oreder&id="+this.id;
			console.log(this.qrcode_url);
			setTimeout(()=>{
				this.$refs.qrcode._makeCode();
			},1000)
		},
		onShow() {
			
		},
		components: {tkiQrcode},
		methods: {
			qrR(e){
				console.log(e)
			},
			goRecord(){
				uni.redirectTo({
				    url: '../record/record?guider=1'
				});
			}
		}
	}
</script>

<style scoped>
.page{
	width: 750upx;
	min-height: 100vh;
	background-color: #859dc2;
	box-sizing: border-box;
	padding: 20upx;
}
.box{
	width: 100%;
	box-sizing: border-box;
	background-color: #FFFFFF;
	border-radius: 20upx;
	text-align: center;
	padding:0;
	margin-top: 40upx;
	overflow: hidden;
	padding-bottom: 20upx;
}
.tit{
	background-color: #f7f7f7;
	margin-bottom: 120upx;
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 20upx;
}
.qian{
	width: 38upx;
	height: 40upx;
	margin-right: 20upx;
}
.money{
	font-size: 14px;
	margin-top: 60upx;
	margin-bottom: 110upx;
	color: #859dc2;
	
}
.shu{
	margin: 0 20upx;
}
.msg{
	padding-top: 60upx;
	border-top: 1px solid #cccccc;
	font-size: 12px;
	color: #000000;
}
.btn-box{
	margin-top: 80upx;
	text-align: center;
}
.btn{
	width: 450upx;
	height: 80upx;
	line-height: 80upx;
	color: #859dc2;
	font-size: 14px;
}
</style>
